<!DOCTYPE html>
<html>
<head lang="en">
    <title>Spring Boot Demo - FreeMarker</title>
    <link href="/css/index.css" rel="stylesheet">
    <script type="text/javascript" src="/jar/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
<h2>首页</h2>
<div>
<#include "line.ftl"/>
</div>
<textarea style="float: right;position: fixed;margin-left: 830px" class="magnet" rows="50" cols="90"></textarea>
<ul>
<#list itemList as item>
    <div class="list">
        <img class="img" src="${item.img!}" fan="${item.id!}"/>

        <div>${item.title!} --- ${item.id!} <a href="/act?name=${item.actUrl!}&id=${item.sId!}">${item.act}</a></div>
        <#if item.detailKey??><div><button class="detail" data="${item.detailKey}">查看演员</button></div></#if>
    </div>
</#list>
</ul>
<div style="margin:0 auto;">
<#include "page-lib.ftl"/>
<@pageShow total,page,param/>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".detail").click(function(){
            htmlobj=$.ajax({url:"/lib/detail4actor/"+$(this).attr("data"),async:false});
            $(this).parent().html(htmlobj.responseText);
        });

        $('.img').click(function() {
            var magnet = "";
            $.get("/json?id="+$(this).attr("fan"),function(data,status){
                var no = $('.magnet').val();
                if(no.length == 0) {
                    $('.magnet').val(data + "\r\n");
                }else{
                    $('.magnet').val(no + "\n\r" + data + "\r\n");
                }
            });
        });
    });
</script>
</body>
</html>